<template>
  <div class="system-setting">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="activeName" class="setting-tabs">
      <el-tab-pane label="基本设置" name="basic">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span>系统基本设置</span>
              <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
            </div>
          </template>
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="basicSettings.systemName" />
            </el-form-item>
            <el-form-item label="系统Logo">
              <el-upload
                class="avatar-uploader"
                action="/api/upload"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
              >
                <img v-if="basicSettings.logo" :src="basicSettings.logo" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item label="系统主题色">
              <el-color-picker v-model="basicSettings.themeColor" />
            </el-form-item>
            <el-form-item label="系统描述">
              <el-input type="textarea" v-model="basicSettings.description" rows="4" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="安全设置" name="security">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span>安全设置</span>
              <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
            </div>
          </template>
          <el-form :model="securitySettings" label-width="120px">
            <el-form-item label="密码策略">
              <el-checkbox-group v-model="securitySettings.passwordPolicy">
                <el-checkbox label="uppercase">必须包含大写字母</el-checkbox>
                <el-checkbox label="lowercase">必须包含小写字母</el-checkbox>
                <el-checkbox label="number">必须包含数字</el-checkbox>
                <el-checkbox label="special">必须包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="密码最小长度">
              <el-input-number v-model="securitySettings.minPasswordLength" :min="6" :max="20" />
            </el-form-item>
            <el-form-item label="登录失败锁定">
              <el-switch v-model="securitySettings.loginLock" />
            </el-form-item>
            <el-form-item label="锁定阈值" v-if="securitySettings.loginLock">
              <el-input-number v-model="securitySettings.lockThreshold" :min="3" :max="10" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="通知设置" name="notification">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span>通知设置</span>
              <el-button type="primary" @click="saveNotificationSettings">保存设置</el-button>
            </div>
          </template>
          <el-form :model="notificationSettings" label-width="120px">
            <el-form-item label="邮件通知">
              <el-switch v-model="notificationSettings.emailNotification" />
            </el-form-item>
            <el-form-item label="SMTP服务器" v-if="notificationSettings.emailNotification">
              <el-input v-model="notificationSettings.smtpServer" />
            </el-form-item>
            <el-form-item label="SMTP端口" v-if="notificationSettings.emailNotification">
              <el-input-number v-model="notificationSettings.smtpPort" :min="1" :max="65535" />
            </el-form-item>
            <el-form-item label="系统通知">
              <el-checkbox-group v-model="notificationSettings.systemNotifications">
                <el-checkbox label="login">登录通知</el-checkbox>
                <el-checkbox label="operation">操作通知</el-checkbox>
                <el-checkbox label="error">错误通知</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const activeName = ref('basic')

// 基本设置
const basicSettings = ref({
  systemName: '熊猫系统',
  logo: '',
  themeColor: '#4CAF50',
  description: '这是一个现代化的管理系统'
})

// 安全设置
const securitySettings = ref({
  passwordPolicy: ['uppercase', 'number'],
  minPasswordLength: 8,
  loginLock: true,
  lockThreshold: 5
})

// 通知设置
const notificationSettings = ref({
  emailNotification: false,
  smtpServer: '',
  smtpPort: 465,
  systemNotifications: ['login', 'error']
})

// 获取基本设置
const fetchBasicSettings = async () => {
  try {
    const response = await axios.get('/api/settings/basic')
    if (response.data.code === 200) {
      basicSettings.value = response.data.data
    }
  } catch (error) {
    console.error('获取基本设置失败:', error)
    ElMessage.error('获取基本设置失败')
  }
}

// 获取安全设置
const fetchSecuritySettings = async () => {
  try {
    const response = await axios.get('/api/settings/security')
    if (response.data.code === 200) {
      securitySettings.value = response.data.data
    }
  } catch (error) {
    console.error('获取安全设置失败:', error)
    ElMessage.error('获取安全设置失败')
  }
}

// 获取通知设置
const fetchNotificationSettings = async () => {
  try {
    const response = await axios.get('/api/settings/notification')
    if (response.data.code === 200) {
      notificationSettings.value = response.data.data
    }
  } catch (error) {
    console.error('获取通知设置失败:', error)
    ElMessage.error('获取通知设置失败')
  }
}

// 保存基本设置
const saveBasicSettings = async () => {
  try {
    const response = await axios.post('/api/settings/basic', basicSettings.value)
    if (response.data.code === 200) {
      ElMessage.success('基本设置保存成功')
    } else {
      ElMessage.error(response.data.message || '保存失败')
    }
  } catch (error) {
    console.error('保存基本设置失败:', error)
    ElMessage.error(error.response?.data?.message || '保存失败')
  }
}

// 保存安全设置
const saveSecuritySettings = async () => {
  try {
    const response = await axios.post('/api/settings/security', securitySettings.value)
    if (response.data.code === 200) {
      ElMessage.success('安全设置保存成功')
    } else {
      ElMessage.error(response.data.message || '保存失败')
    }
  } catch (error) {
    console.error('保存安全设置失败:', error)
    ElMessage.error(error.response?.data?.message || '保存失败')
  }
}

// 保存通知设置
const saveNotificationSettings = async () => {
  try {
    const response = await axios.post('/api/settings/notification', notificationSettings.value)
    if (response.data.code === 200) {
      ElMessage.success('通知设置保存成功')
    } else {
      ElMessage.error(response.data.message || '保存失败')
    }
  } catch (error) {
    console.error('保存通知设置失败:', error)
    ElMessage.error(error.response?.data?.message || '保存失败')
  }
}

// 处理Logo上传成功
const handleLogoSuccess = (response) => {
  if (response.code === 200) {
    basicSettings.value.logo = response.data.url
    ElMessage.success('Logo上传成功')
  } else {
    ElMessage.error(response.message || 'Logo上传失败')
  }
}

// 初始化
onMounted(() => {
  fetchBasicSettings()
  fetchSecuritySettings()
  fetchNotificationSettings()
})
</script>

<style scoped>
.system-setting {
  padding: 20px;
}

.setting-tabs {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
}

.setting-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-uploader:hover {
  border-color: #4CAF50;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  line-height: 178px;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style> 